<!-- 统计分析-访问量 -->
<template>
  <el-card style="margin-bottom:20px;">
    <template #header>
      <div class="card-header">
        <el-date-picker v-model="yearValue" type="yearrange" :disabled-date="disabledDateY" @calendar-change="calendarChangeY" start-placeholder="开始年份" end-placeholder="结束年份" format="YYYY" value-format="YYYY" />
        <el-button type="primary" @click="search('year')" style="margin-left:20px;">查询</el-button>
      </div>
    </template>
    <div id="yearEchartsID" style="height:450px;width:100%"></div>
  </el-card>

  <el-card>
    <template #header>
      <div class="card-header">
        <el-date-picker v-model="monthValue" type="monthrange" :disabled-date="disabledDateM" @calendar-change="calendarChangeM" start-placeholder="开始月份" end-placeholder="结束月份" format="YYYY-MM" value-format="YYYY-MM" />
        <el-button type="primary" @click="search('month')" style="margin-left:20px;">查询</el-button>
      </div>
    </template>
    <div id="monthEchartsID" style="height:450px;width:100%"></div>
  </el-card>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { getSee } from '@/api/allApi'
import * as echarts from 'echarts'
import { getTime } from '@/utils/myMethod' //工具类

const yearValue = ref(['2015', '2025'])
const monthValue = ref(['2024-01', '2024-12'])
const yearX = ref([])
const yearData = ref([])
const monthX = ref([])
const monthData = ref([])
const oneY = ref()
const oneYM = ref()
onMounted(() => {
	search('year')
	search('month')
})
const search = (type: string) => {
	if (type === 'year') {
		yearX.value = []
		yearData.value = []
		getSee({
			startDate: yearValue.value[0],
			endDate: yearValue.value[1],
			type: type,
			websiteId: 1,
      name:'category_id'
		}).then(res => {
			if (res.code == 0) {
				res.data.forEach((e: any) => {
					yearX.value.push(e.createTime)
					yearData.value.push(e.number)
				})
				yearEcharts()
			}
		})
	} else if (type === 'month') {
		monthX.value = []
		monthData.value = []
		getSee({
			startDate: monthValue.value[0],
			endDate: monthValue.value[1],
			type: type,
      name:'category_id'
		}).then(res => {
			if (res.code == 0) {
				res.data.forEach((e: any) => {
					monthX.value.push(e.createTime)
					monthData.value.push(e.number)
				})
				monthEcharts()
			}
		})
	}
}
const yearEcharts = () => {
	var echartsYear = echarts.init(document.getElementById('yearEchartsID'))
	var optionYear = {
		tooltip: {},
		title: [
			{
				text: '每年访问量',
				textStyle: {
					fontSize: 20
				}
			}
		],
		xAxis: {
			type: 'category',
			data: yearX.value
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: yearData.value,
				type: 'bar'
			}
		]
	}
	echartsYear.setOption(optionYear)
}
const monthEcharts = () => {
	var echartsMonth = echarts.init(document.getElementById('monthEchartsID'))
	var optionMonth = {
		tooltip: {},
		title: [
			{
				text: '每月访问量',
				textStyle: {
					fontSize: 20
				}
			}
		],
		xAxis: {
			type: 'category',
			data: monthX.value
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: monthData.value,
				type: 'line'
			}
		]
	}
	echartsMonth.setOption(optionMonth)
}
const disabledDateY = (data: any) => {
	let year = getTime(data, 'Y')
	if (oneY.value) {
		return year > oneY.value + 9 || year < oneY.value - 9
	}
}
const calendarChangeY = (data: any) => {
	oneY.value = getTime(data, 'Y')
}
const disabledDateM = (data: any) => {
	let month = Number(getTime(data, 'M'))
	let year = getTime(data, 'Y')
	if (oneYM.value) {
		let y = Number(oneYM.value.split('-')[0])
		let m = Number(oneYM.value.split('-')[1])
		return (year >= y + 1 && month > m + 11 - 12) || (year <= y - 1 && month < m - 11 + 12)
	}
}
const calendarChangeM = (data: any) => {
	oneYM.value = getTime(data, 'YM')
}
</script>

<style lang="scss" scoped>
</style>
